<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="icon" href="./2021_img/i6.png">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <title>login</title>
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    ul,ol {
        list-style: none;
    }
    .header {
      height: 60px;
      background-color: rgba(226, 250, 181, 0.46);
    }
    .center {
      /* pc端定宽 */
      width: 1360px;
      /* 块级元素水平居中 */ 
      margin:auto;     
    }
    .center img {
      vertical-align: middle;
    }
    .center h1 {
      display: inline-block;
      vertical-align: middle;
      margin-left: 350px;
      font-family: Cambria, serif;
      color: rgb(100, 140, 226);
      font-family: "宋体";
    }
    .bg {
      width: 100%;
      height: 660px;
      background-image: url(./2021_img/flower9.jpg);
      background-size: cover;
    }
    /* ************* */
    .logo-area {
      width: 290px;
      height: 310px;
      background-color: #99CCCC;
      border-radius: 10px;
      margin-left: 880px;
    }
    .logo-tit {
      padding: 30px 0px;
      height: 50px;
      text-align: center;
      color: rgb(103, 171, 235);
    }
    .logo-tit a {
      color: rgb(102, 187, 159);
      text-decoration: none;
    }
    .logo-input {
      height: 90px;
    }
    .logo-input input {
      width: 180px;
      height: 30px;
      margin: 15px 56px 10px;
      background-color: rgb(230, 199, 157);
      text-align: center;
      outline: none;
      border: 2px solid rgb(102, 156, 236);
      border-radius: 8px;
      font-size: 14px;
      background-repeat: no-repeat;
      background-position: 5% 50%;
    }
    .bg .logo-input .user {
      background-image: url(./2021_img/user.logo.png);
    }
    .bg .logo-input .upwd {
      background-image: url(./2021_img/upwd.logo.png);

    }
    .logo-auto  {
      margin: 20px 60px;
      color: rgb(79, 134, 238);
    }
    .logo-area button {
      width: 160px;
      height: 40px;
      border: 0px;
      margin: 12px 66px 20px;
      background-color: rgb(90, 180, 221);
      border-radius: 10px;
      font-size: 16px;
    }
    .logo-area button  a {
      text-decoration: none;
      color: rgb(230, 227, 227);
    }
    .d1 {
        list-style: none;
        text-align: center;
        background-color: rgb(138, 226, 226);
    }
    .d1 span {
        margin: 15px 30px;
    }
    .breadcrumb-item + .breadcrumb-item::before {                                
      content: "|";
    }
    .b{
      margin: 10px 0px;
    }
    </style>
</head>
<body>
    <!-- 页头 -->
  <div class="header">
    <div class="center">
        <!-- logo图 -->
        <img src="./2021_img/logo(1).png" alt="">
        <!-- d=大标题,考虑横着排列,变成行内块 -->
        <h1>花心思 & 只为你</h1>
      </div>
  </div>
      <!-- 登录区域 -->
      <div class="center">
        <div class="bg">
        <div class="logo-area">
            <!-- 登陆标题 -->
            <div class="logo-tit">
              <b class="b">欢迎新人登陆</b>
              <a href="#">新用户点击注册</a>
            </div>
            <div class="logo-input">
              <input type="text" placeholder="请输入您的用户名"class="user">
              <!-- <label>用户名不能为空哦</label> -->
              <input type="password" placeholder="请输入您的密码"class="upwd">
            </div>
            <div class="logo-auto">
              <input type="checkbox" id="yes">
              <label for="yes">自动登陆</label> 
            </div>
            <button>
              <a href="./02_home.html">登陆</a>
            </button>
          </div>
        </div>
      </div>
    <div class="center">
        <!-- 面包屑导航 -->
      <div class="breadcrumb d1 d-flex">
        <span class="breadcrumb-item float-left">首页</span>
        <span class="breadcrumb-item float-left">关于我们</span>
        <span class="breadcrumb-item float-left">媒体报道</span>
        <span  class="breadcrumb-item float-left">联系方式</span>
        <span class="breadcrumb-item float-left">企业团购</span>
        <span class="breadcrumb-item float-left">友情链接</span>
        <span class="breadcrumb-item float-left">为什么选择花礼网</span>
      </div>
    </div>
</body>
</html>